<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        select{
            width: 200px;
            min-height: 30px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>双向数据绑定指令v-model</h4>
        <!-- 
            v-model 实际上是软件开发中一种 语法糖 代码
                    语法糖:软件中将一部分具有固定功能和固定代码解构的操作，转换为一个简单的使用规则
            v-model 是 v-bind 和 v-on 对 HTML 表单元素的统一定义规则
        -->
        <p>msg:{{ msg }}</p>
        <p>v-model指令只能被使用HTML的表单输入元素上，或者vue的组件元素上(组件化讲解)</p>
        <p>v-model作为双向数据操作，依存于一个被操作的数据变量，所以v-model不接受除仓库变量外任何其他取值</p>
        <input type="text" v-bind:value="msg" v-on:input=" msg=$event.target.value ">
        <input type="text" v-bind:value="msg" v-on:input=" msg=$event.target.value ">
        <br> 
        <input type="text" v-model="msg">
        <hr>
        <h4>input type=text 单行文本框</h4>
        <!--
            v-model 完成单行文本输入框绑定，就是直接完成 v-bind:value 和 v-on:input 的绑定
        -->
        <p>info:{{ info }}</p>
        <!-- <input type="text" /> -->
        <input v-model="info" type="text" />
        <p>color:{{ color }}</p>
        <input v-model="color" type="color" />

        <h4>textarea 多行文本域</h4>
        <pre>{{ desc }}</pre>
        <!--
            v-model 完成多行文本域绑定，就是直接完成 v-bind:value 的DOM属性绑定 和 v-on:input 的绑定
        -->
        <!-- 使用插值表达式方式拆分，导致操作时该标签在不停的重新渲染 -->
        <textarea cols="30" rows="10" @input="desc=$event.target.value">{{ desc }}</textarea>
        <!-- v-model使用的是dom的value属性，该属性不会重复渲染元素，但依然可以更新内容 -->
        <textarea cols="30" rows="10" :value="desc" @input="desc=$event.target.value"></textarea>
        <textarea cols="30" rows="10" v-model="desc"></textarea>

        <h4>select 下拉列表</h4>
        <!-- 
            v-model 只能被绑定于 select  标签上
            v-model 完成下拉列表绑定，就是直接完成 select的 v-bind:value 的DOM属性绑定 和 v-on:change 的绑定
        -->
        <p>{{ item }}</p>
        <select :value="item" @change=" item=$event.target.value ">
            <optgroup label="组1">
                <option value="A">a</option>
                <option value="B">b</option>
                <option value="C">c</option>
            </optgroup>
            <optgroup label="组2">
                <option value="D">d</option>
                <option value="E">e</option>
            </optgroup>
        </select>
        <select v-model="item">
            <option value="A">a</option>
            <option value="B">b</option>
            <option value="C">c</option>
            <option value="D">d</option>
            <option value="E">e</option>
        </select>
        <p>下拉列表的 v-model 选择取值变化【原生自有功能】</p>
        <!-- 下拉列表的选中在select value上记录的是，被选中option的value属性值，如果没有value属性为标签内容值 -->
        <p>{{ item1 }}</p>
        <select v-model="item1">
            <option value="A">a</option>
            <option value="B">b</option>
            <option >c</option>
            <option >d</option>
            <option value="E">e</option>
        </select>
        <p>下拉列表的多选模式</p>
        <!-- 当v-model绑定的select为多选模式时，操作的变量会以数组作为记录变量进行数据记录 -->
        <p>{{ item2 }}</p>
        <select v-model="item2" multiple>
            <option value="A">a</option>
            <option value="B">b</option>
            <option value="C">c</option>
            <option value="D">d</option>
            <option value="E">e</option>
        </select>
        <input type="button" value="添加元素" @click="item2.push('6666')">
    </div>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    msg:"msg",
                    info:"info",
                    color:"#000000",
                    desc:"aaaa\nbbbbb",
                    item:"C",
                    item1:"A",
                    item2:[]
                }
            }
        }).mount("#app")
    </script>
</body>
</html>